<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height:calc(100vh - 120rpx);" :circles="circles" :polyline="polyline"
					:scale="scale" :latitude="latitude" :longitude="longitude" :markers="markers" :enable-3D="true"
					:show-compass="true" :enable-overlooking="true" :enable-traffic="true" @markertap="markertap"></map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '项目地点',
				latitude: 36.67645, // 中心坐标
				longitude: 117.09641, // 中心坐标
				// 点坐标
				markers: [{
						title: '',
						id: 2,
						latitude: 36.67645,
						longitude: 117.09641,
						iconPath: '/static/images/map/address.png',
						width: 27,
						height: 30,
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '项目地点',
							color: '#000000',
							fontSize: 12,
							borderRadius: 5,
							padding: 10,
							display: 'ALWAYS'
						}
					},
					{
						title: '我的位置',
						id: 5,
						latitude: 36.67645,
						longitude: 117.09641,
						iconPath: '/static/images/map/people.png',
						width: 30,
						height: 30
					}
				],
				scale: 14, //地图层级
				// 画圆
				circles: [{
					//在地图上显示圆
					latitude: 36.67645,
					longitude: 117.09641,
					opacity: 0.5,
					fillColor: '#0f0f0f0f', //填充颜色 #0f0f0f0f
					color: '#0f0f0f0f', //描边的颜色
					radius: 1000, //半径(米)
					strokeWidth: 1 //描边的宽度
				}],
				// 画线
				polyline: [{
					//指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
							latitude: 36.67645,
							longitude: 117.09641
						},
						{
							latitude: 36.66645,
							longitude: 117.07641
						}
					],
					color: '#1577EE', //线的颜色
					width: 2, //线的宽度
					dottedLine: true, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}]
			};
		},
		onLoad(e) {
			let coordinate = JSON.parse(e.coordinate);
			// 地图中心
			this.latitude = coordinate.projectLatitude;
			this.longitude = coordinate.projectLongitude;
			// 项目地点
			this.markers[0].latitude = coordinate.projectLatitude;
			this.markers[0].longitude = coordinate.projectLongitude;
			this.markers[0].callout.content = coordinate.projectName;
			this.circles[0].latitude = coordinate.projectLatitude;
			this.circles[0].longitude = coordinate.projectLongitude;
			this.circles[0].radius = coordinate.faceRecognitionRange;
			this.polyline[0].points[1].latitude = coordinate.projectLatitude;
			this.polyline[0].points[1].longitude = coordinate.projectLongitude;
			// 个人当前位置
			this.markers[1].latitude = coordinate.nowLatitude;
			this.markers[1].longitude = coordinate.nowLongitude;
			this.polyline[0].points[0].latitude = coordinate.nowLatitude;
			this.polyline[0].points[0].longitude = coordinate.nowLongitude;
		},
		methods: {
			markertap() {
				// console.log('markertap');
			}
		}
	};
</script>

<style lang="less" scoped>
	.bottom {
		bottom: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		z-index: 9;
		padding: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;
			height: 100%;
			width: 600rpx;
			box-sizing: border-box;

			.img {
				height: 100%;

				>image {
					height: 100%;
					width: 80rpx;
				}
			}

			.detail {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				& text:first-child {
					font-size: 27rpx;
					color: #000000;
					font-weight: 500;
				}

				& text:last-child {
					font-size: 25rpx;
					color: rgba(0, 0, 0, 0.7);
				}
			}

			.toAddress {
				margin-left: 50rpx;
				height: 80%;
				width: 160rpx;
				justify-content: center;
				display: flex;
				border-radius: 60rpx;
				align-items: center;
				font-size: 26rpx;
				font-weight: 600;
				border: 1rpx solid rgba(0, 0, 0, 0.5);
			}
		}

		.icon {
			height: 65rpx;
			width: 65rpx;

			>image {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>